<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>嵌套路由</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <link rel="stylesheet" href="assets/css/bootstrap.css" />
    <link rel="stylesheet" href="assets/css/custom.css" />
</head>

<body>
    <div id="app">
        <div class="row">
            <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header">
                    <h2>Router Basic - 01</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-2">
                <div class="list-group">
                    <!--使用指令v-link进行导航-->
                    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
                    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-body">
                        <!--用于渲染匹配的组件-->
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <template id="home">
        <div>
            <h1>Home</h1>
            <p>{{msg}}</p>
        </div>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <a v-link="{path:'/home/news'}">News</a>
                </li>
                <li>
                    <a v-link="{path:'/home/message'}">Message</a>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <ul>
            <li>News 01</li>
            <li>News 02</li>
            <li>News 03</li>
        </ul>
    </template>
    <template id="message">
        <ul>
            <li>message 01</li>
            <li>message 02</li>
            <li>message 03</li>
        </ul>
    </template>

</body>
<script>
    var router = new VueRouter()
    router.redirect({
        '/': '/home'
    })
    var Home = Vue.extend({
        template: '#home',
        data: function () {
            return { msg: 'hello,vue-router' }
        }
    });
    var News = Vue.extend({
        template: '#news'
    });
    var Message = Vue.extend({
        template: '#message'
    });
    var About = Vue.extend(
        {
            template: '<div><h1>About</h1><p>{{msg}}</p></div>',
            data: function () {
                return {
                    msg: '关于我们'
                }
            }
        }
    );
    //路由映射
    router.map({
        '/home': {
            component: Home,
            // 定义子路由
            subRoutes: {
                '/news': {
                    component: News
                },
                '/message': {
                    component: Message
                }
            }
        },
        '/about': {
            component: About
        }
    });

    var App = Vue.extend({})
    router.start(App, '#app')

</script>

</html>